<template>
    <bi-form class="shop-spec-item" ref="form">
        <bi-icon :loading="loading" v-if="loading" />
        <template v-if="!loading">
            <div  class="no-info" v-if="list.length==0">
                <template v-if="noText==''">
                当前规格未设条目 <bi-button type="link" @click="$go({app:'shop',controller:'admin.spec',action:'index'})">前往设置</bi-button>
                </template>
                <template v-if="noText!=''">
                    {{noText}}
                </template>
            </div>

            <template v-for="item in list" :key="item.item_id">
                <div class="spec-item-text" v-if="item.type!='node'">
                    <spec-item-input :item="item"  v-model="item.value" />
                </div>
                <div class="spec-item-group" v-if="item.type=='node'">
                    <div class="spec-item-group-title">
                        {{item.title}}
                    </div>
                    <div class="spec-item-group-list">
                        <spec-item-input v-for="node in item.children" v-model="node.value" :item="node" :key="node.item_id"></spec-item-input>
                    </div>
                </div>
            </template>
        </template>
    </bi-form>
</template>

<script>
import specItemInput from './spec-item-input.vue';
export default{
    data(){
        return {
            list:[],
            loading:false
        }
    },
    components:{
        specItemInput
    },
    props:{
        spec:{
            type:[Number,String],
            default:''
        },
        data:{
            type:Object,
            default:function(){
                return {};
            }
        },
        noText:{
            type:String,
            default:''
        }
    },
    watch:{
        spec(val){
            this.refresh();
        }
    },
    methods:{
        refresh(){



            let parse = (item)=>{

                for(let i=0;i<item.length;i++){
                    if (item[i].type=='node' && item[i].children && item[i].children.length>0){
                        item[i].children = parse(item[i].children);
                    }else{
                         if (this.data[item[i].item_id] && this.data[item[i].item_id].value){
                            item[i].value = this.data[item[i].item_id].value;
                         }
                    }
                }

                return item;

            }


            if (this.spec){
                this.loading = true;
                this.$ajax({
                    url:this.$url({app:'shop',controller:'admin.spec',action:'ItemTree'}),
                    data:{
                        spec:this.spec
                    },
                    success:(res)=>{
                        this.loading = false;
                        this.list = parse( res.tree);
                    }
                });
            }
           
        },
        getData(){
            let data = {};
            
            for(let i=0;i<this.list.length;i++){
                if (this.list[i].type=='node'){
                    for(let j=0;j<this.list[i].children.length;j++){
                        data[this.list[i].children[j].item_id] = {value:this.list[i].children[j].value};
                    }
                }else{
                    data[this.list[i].item_id] = {value:this.list[i].value};
                }
            }

            return data;
        },
        check(){
            return true;
        }
    },
    mounted(){
        this.refresh();
    }
}
</script>


<style>
.shop-spec-item{
    padding: 5px;
}


.spec-item-group + .spec-item-text{
    border-top: 1px solid var(--bs-gray-500);
    padding-top: 10px;
}

.spec-item-text + .spec-item-group{
    border-top: 1px solid var(--bs-gray-500);
    padding-top: 10px;
}



.spec-item-group-title{
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid var(--bs-gray-200);
    line-height: 30px;
    margin-bottom: 10px;
}

.spec-item-group-list .form-item-label{
    padding-left: 10px;
}

</style>